<template>
    <div class="home">
        <p>姓名：{{ person.name }}</p>
        <p>年龄：{{ person.age}}</p>
        <button @click="changAge">修改年龄</button>
        <br>
        <p>toRaw之后的对象：{{ysPerson}}</p>
        <P>nCar： {{ nCar }}</P>
        <button @click="changnCar">修改nCar 的数据</button>

        <button @click="changToRawData(ysPerson)">修改toRow 的数据</button>
        <br>
        <p>nCar2:{{ nCar2 }}</p>
        <button @click="changNcar2">修改nCar2</button>
   
   </div>
</template>


<script setup lang="ts" name = "Page59">
import { ref,reactive ,toRaw ,markRaw} from 'vue';
let person = reactive({
    name:'tony',
    age:18
})   
//toRaw 原始数据
let ysPerson = toRaw(person)
console.log('---59--')
console.log(ysPerson)
// markRaw
let nCar = markRaw( {brand:'奔驰',price:100})
const changnCar = ()=>{
    nCar.brand='本田'
    nCar.price=1000
    console.log('看看数据修改',nCar)
}

let nCar2=  reactive(nCar)
console.log('-----------------')
console.log(nCar)
console.log(nCar2)
function changNcar2(){
    nCar2.price+=1
}

function changAge(){
    person.age +=1
    console.log(ysPerson)
}

function changToRawData(ysPerson:any){
    ysPerson.age +=2
    console.log("数据",ysPerson)
}
</script>

<style lang="scss" scoped>

</style>